<template>
    <el-dialog v-model="lowCodeStore.changeModelNameDialog.visible" title="修改名称" width="50%" :draggable="true"
        @close="handleClose(ruleFormRef)">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="model-ruleForm"
            :size="formSize" status-icon label-position="top">
            <el-form-item label="名称" prop="name" :rules="[
                {
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur',
                },
            ]">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)" size="small">重置</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)" size="small">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose } from "vue";
import pinia from "@/store/pinia";
import { useStore } from "@/store/lowCode.js";
const lowCodeStore = useStore(pinia);

const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
    name: "",
});

const submitForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("ruleForm!");
            console.log(ruleForm);
        } else {
            console.log("error submit!", fields);
        }
    });
};

const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
};

const handleClose = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();

    ruleForm.fields = [
        {
            key: 1,
            value: "",
            fieldChineseName: "",
            fieldEnglishName: "",
            fieldType: "",
        },
    ]

    lowCodeStore.changeModelNameDialog.visible = false;
};

defineExpose({
    ruleForm
})
</script>

<style lang="less" scoped>
.fields-container {
    background: rgb(245, 246, 247);
    padding: 10px 20px;
}

.fields-container /deep/ .el-input__wrapper {
    background-color: rgb(255, 255, 255) !important;
    box-shadow: none !important;
}

.fields-container /deep/ .el-select__wrapper {
    box-shadow: none !important;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.model-ruleForm /deep/ .el-form-item__error {
    left: auto !important;
    right: 45px !important;
    top: 40% !important;
}
</style>
